<template>
	<view class="order" v-if="detail">
		<view class="top">
			<view class="top_t">
				商品信息
			</view>
			<view class="top_content" @click="$pageTo(`/pages/index/restaurant?id=${detail.star.id}`)">
				<view class="c_left">
					<view class="l_img">
						<image v-if="detail.star.image" :src="http + detail.star.image" mode=""></image>
					</view>
					<view class="l_text">
						<view class="text_top">
							{{detail.star.title}}
						</view>
						<view class="text_bottom">
							{{detail.spec}}
						</view>
					</view>
				</view>
				<view class="c_right">
					<view class="c_money">
						<text>￥</text>{{detail.oneprice}}
					</view>
					<view class="c_num">
						<text>x</text>{{detail.number}}
					</view>
				</view>
			</view>
		</view>
		<view class="msg">
			
			<view class="msg_list">
				<view class="m_left">
					订单状态
				</view>
				<view class="m_right">
					{{status[detail.status]}}
				</view>
			</view>
			
			<view class="msg_list">
				<view class="m_left">
					使用日期
				</view>
				<view class="m_right">
					{{detail.daytime}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					联系人
				</view>
				<view class="m_right">
					{{detail.contactname}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					联系电话
				</view>
				<view class="m_right">
					{{detail.contactphone}}
				</view>
			</view>
		</view>
		<view class="msg" v-if="detail.status==2||detail.status==3">
			<view class="title">
				凭证码：{{detail.orderno}}
			</view>
			<view class="code">
				<image v-if="detail.verifyimg" :src="http+detail.verifyimg" mode=""></image>
			</view>
		</view>
		<view class="msg" v-if="detail.status==2||detail.status==3">
			<view class="msg_list">
				<view class="m_left">
					订单编号
				</view>
				<view class="m_right">
					{{detail.orderno}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					支付时间
				</view>
				<view class="m_right">
					{{detail.paytime>1?$formatDate(detail.paytime*1000):''}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					支付方式
				</view>
				<view class="m_right">
					{{arr[detail.paytype]}}
				</view>
			</view>
		</view>
		
		<view class="bottom" v-if="detail.status==1">
			<view class="b_box">
				<view class="b_money">
					<view class="">
						订单金额：
					</view>
					<view class="">
						<text>￥{{detail.allprice}}</text>
					</view>
					
				</view>
				<view class="btns">
					<view class="b_btn" @click="toPay">
						继续支付
					</view>
					<view class="b_btn2" @click="toDel">
						取消支付
					</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="msg">
			<view class="msg_list">
				<view class="m_left">
					收货人
				</view>
				<view class="m_right">
					{{detail.daytime}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					收货手机号
				</view>
				<view class="m_right">
					{{detail.contactphone}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					收货地址
				</view>
				<view class="m_right">
					{{detail.contactname}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					作品编号
				</view>
				<view class="m_right">
					{{detail.contactname}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					作品图片
				</view>
				<view class="m_right">
					{{detail.contactname}}
				</view>
			</view>
		</view> -->
		<!-- <view class="msg">
			<view class="msg_list">
				<view class="m_left">
					物流公司
				</view>
				<view class="m_right">
					{{detail.daytime}}
				</view>
			</view>
			<view class="msg_list">
				<view class="m_left">
					物流单号
				</view>
				<view class="m_right">
					{{detail.contactphone}}
				</view>
			</view>
			
		</view> -->
		<view class="" style="height: 100rpx;" v-if="detail.status!=3">
			
		</view>
		<view class="bottom" v-if="detail.status==2">
			<view class="b_box">
				<view class="b_money">
					订单金额：<text>￥{{detail.allprice}}</text>
				</view>
				<view class="b_btn2" @click="toCancel">
					申请退款
				</view>
			</view>
		</view>
		<!-- <view class="bottom" v-if="detail.status==2">
			<view class="b_box">
				<view class="b_money">
					订单金额：<text>￥{{detail.allprice}}</text>
				</view>
				<view class="b_btn2" @click="over">
					确认收货
				</view>
			</view>
		</view> -->
		<!-- <view class="bottom" v-if="detail.status==1">
			<view class="b_box">
				<view class="b_money">
					订单金额：<text>￥{{detail.allprice}}</text>
				</view>
				<view class="b_btn2" @click="addAddress">
					完善信息
				</view>
			</view>
		</view> -->
		<!-- <u-popup :show="show" @close="close" @open="open" mode="bottom" :round="10" closeable>
			<view class="pop-userinfo">
				<view class="p-title">
					完善收货信息
				</view>
				<view class="p-con">
					
					<view class="item">
						<view class="l">
							收件人姓名
						</view>
						<view class="r">
							<input type="text" class="weui-input" placeholder="请输入" v-model="name"
								/>
						</view>
					</view>
					<view class="item">
						<view class="l">
							收件人电话
						</view>
						<view class="r">
							<input type="number" class="weui-input" placeholder="请输入" v-model="phone"
								/>
						</view>
					</view>
					<view class="item">
						<view class="l">
							收件人地址
						</view>
						<view class="r">
							<input type="text" class="weui-input" placeholder="请输入" v-model="address"
								/>
						</view>
					</view>
					<view class="item">
						<view class="l">
							作品编号
						</view>
						<view class="r">
							<input type="text" class="weui-input" placeholder="请输入" v-model="code"
								/>
						</view>
					</view>
					<view class="item2">
						<view class="t">
							上传作品图片
						</view>
						<view class="b">
							<view class="i" v-for="(item,index) in imgs" :key="index">
								<image :src="http + item" mode="aspectFill"></image>
								<view class="del" @click="imgs.splice(index,1)">
									×
								</view>
							</view>
							<view class="i" @click="upload">
								<image src="../../static/mine/tianjia.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="p-btn" @click="setAddress">
					确认
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				phone:'',
				code:'',
				address:"",
				imgs:[],
				show: false,
				id:0,
				mid:0,
				type:0,
				detail:'',
				http:this.$http,
				arr:['','微信支付'],
				status: ['已取消', '待付款', '待核销', '已使用', '申请退款', '已退款', '拒绝退款', '延时退款'],
			}
		},
		onLoad(o) {
			this.id =o.id
			this.mid = uni.getStorageSync('user').id
			this.getData()
		},
		onShareAppMessage(e) {
			return {
				title: '',
				path: '/pages/index/index'
			}
		},
		methods: {
			addAddress(){
				this.show = true
			},
			over(){
				uni.showModal({
					title: '温馨提示',
					content: '您确认收货吗?',
					success:  (res) =>{
						if (res.confirm) {
							console.log('用户点击确定');
							this.$post('user/ticketOrderCancel',{
								mid:this.mid,
								order_id:this.id,
							}).then(r=>{
								if(r.code==0){
									uni.showToast({
										title: '操作成功',
										mask: true
									})
									this.getData()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getData(){
				this.$post('user/starOrderDetail',{
					mid:this.mid,
					order_id:this.id
				}).then(res=>{
					// // console.log(res)
					if(res.code==0){
						this.detail = res.data
					}
					if(res.code== -3){
						uni.showToast({
							title:'用户不存在请重新登录',
							icon:'none',
							mask:true
						})
						uni.clearStorage()
						setTimeout(()=>{
							uni.switchTab({
								url:'../index/index'
							})
						},1200)
					}
					if(res.code== -4){
						uni.showToast({
							title:'用户已被禁用',
							icon:'none',
							mask:true
						})
						// uni.clearStorage()
						setTimeout(()=>{
							uni.switchTab({
								url:'../index/index'
							})
						},1200)
					}
				})
			},
			setAddress(){
				if(!this.name||!this.phone||!this.code||!this.address){
					uni.showToast({
						title: '请完善信息',
						icon:'none'
					})
					return
				}
				this.$post('user/ticketOrderCancel',{
					mid:this.mid,
					order_id:this.id,
					name:this.name,
					phone:this.phone,
					code:this.code,
					address:this.address,
					imgs:this.imgs.toString()
				}).then(r=>{
					if(r.code==0){
						uni.showToast({
							title: '操作成功',
							mask: true
						})
						this.show = false
						this.getData()
					}
				})
			},
			
			upload(){
				this.$uploads().then(r=>{
					console.log(r)
					this.imgs = [...this.imgs,...r]
				})
			},
			
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			
			
			toCancel(){
				uni.showModal({
				    title: '提示',
				    content: '是否申请退款',
				    success: (res)=> {
				        if (res.confirm) {
				           this.$post('user/starOrderCancel',{
				           	mid:this.mid,
				           	order_id:this.id
				           }).then(r=>{
				           	if(r.code==0){
				           		uni.showToast({
				           			title: '申请成功',
				           			mask: true
				           		})
				           		setTimeout(() => {
				           			uni.navigateBack({
				           				delta: 1
				           			})
				           		}, 1200)
				           	}
				           })
				        } else if (res.cancel) {
				            // // console.log('用户点击取消');
				        }
				    }
				});
			},
			toDel(){
				uni.showModal({
				    title: '提示',
				    content: '是否取消订单',
				    success: (res)=> {
				        if (res.confirm) {
				           this.$post('user/starOrderCancelPay',{
				           	mid:this.mid,
				           	order_id:this.id
				           }).then(r=>{
				           	if(r.code==0){
				           		uni.showToast({
				           			title: '取消成功',
				           			mask: true
				           		})
				           		setTimeout(() => {
				           			uni.navigateBack({
				           				delta: 1
				           			})
				           		}, 1200)
				           	}
				           })
				        } else if (res.cancel) {
				            // // console.log('用户点击取消');
				        }
				    }
				});
			},
			toPay(){
				uni.showLoading()
				this.$post('user/starOrderPay',{
					mid:this.mid,
					order_id:this.id,
					from_type:2
				}).then(res=>{
					// // console.log(res)
					if(res.code==0){
						let data = JSON.parse(res.data.Rtn_Par_Data)
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: (res) => {
								uni.hideLoading()
								// // // console.log('success:' + JSON.stringify(res));
								uni.showToast({
									title: '支付成功',
									mask: true
								})
								this.getData()
							},
							fail: (err) => {
								uni.hideLoading()
								// // // console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									title: '取消支付',
									mask: true
								})
								this.getData()
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page{background-color: #f7f7f7;}
	.pop-userinfo {
		padding: 30rpx;
	
		.p-title {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
			color: #333;
			text-align: center;
		}
	
		.p-con {
			margin-top: 80rpx;
			.item2{
				.t{
					height: 60rpx;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #666;
				}
				.b{
					display: flex;align-items: center;flex-wrap: wrap;
					.i{
						width: 180rpx;height: 180rpx;margin: 20rpx 20rpx 0 0;
						position: relative;
						.del{
							position: absolute;top:-10rpx;right: -10rpx;;
							width: 50rpx;height: 50rpx;line-height: 50rpx;text-align: center;
							background-color: #fcc521;color: #fff;font-size: 36rpx;border-radius: 50%;
						}
						image{
							width: 100%;height: 100%;
							border-radius: 10rpx;overflow: hidden;
							border: 2rpx solid #eee;
						}
					}
				}
			}
			.item{
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.l{
					font-size: 26rpx;color: #666;
					width: 160rpx;
				}
				.r{
					flex: 1;width: 1rpx;
					.weui-input{
						height: 80rpx;
						line-height: 80rpx;
						width: 100%;
						font-size: 28rpx;color: #666;
						border-bottom: 2rpx solid #eee;
					}
				}
			}
	
			.p-name {
				height: 80rpx;
				line-height: 80rpx;
				width: 100%;
				box-sizing: border-box;
				border: 2rpx solid #eee;
				padding: 0 20rpx;
				border-radius: 6rpx;
				margin: 40rpx auto 0;
				
			}
	
			
		}
		.p-btn {
			width:75%;
			border-radius: 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin: 80rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background-color: #fcc521;
			text-align: center;
			
		}
	}
	
	image {
		width: 100%;
		height: 100%;
	}
	.order{
		image{
			width: 100%;
			height: 100%;
		}
		.bottom{
			position: fixed;
			bottom: 0;
			z-index: 10;
			background-color: #FFFFFF;
			width: 100%;
			height: 100rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			.b_box{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.b_money{
					font-size: 30rpx;
					color: #333333;
					font-weight: 500;
					text{
						font-size: 32rpx;
						font-weight: 700;
						color: #fcc521;
					}
				}
				.btns{
					display: flex;
					align-items: center;
				}
				.b_btn{
					width: 230rpx;
					height: 80rpx;
					line-height: 80rpx;
					opacity: 1;
					background: #ffd800;
					border-radius: 40rpx;
					text-align: center;
					color: #333333;
					font-size: 30rpx;
					font-weight: 500;
				}
				.b_btn2{
					width: 230rpx;
					height: 80rpx;
					line-height: 80rpx;
					opacity: 1;
					border: 1rpx solid #b4b4b4;
					border-radius: 40rpx;
					text-align: center;
					color: #666666;
					font-size: 30rpx;
					font-weight: 500;
				}
			}
		}
		.top{
			background-color: #FFFFFF;
			padding: 24rpx 34rpx;
			.top_t{
				font-size: 26rpx;
				font-weight: 700;
				color: #333333;
			}
			.top_content{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				.c_left{
					display: flex;
					align-items: center;
					width: 75%;
					.l_img{
						width: 160rpx;
						height: 136rpx;
					}
					.l_text{
						margin-left: 14rpx;
						color: #333333;
						.text_top{
							font-size: 28rpx;
							font-weight: 700;
						}
						.text_bottom{
							color: #888888;
							font-size: 22rpx;
							margin-top: 20rpx;
						}
					}
					
				}
				.c_right{
					width: 30%;
					color: #333333;
					text-align: right;
					.c_money{
						width: 100%;
						font-size: 26rpx;
						text{
							font-size: 22rpx;
						}
					}
					.c_num{
						width: 100%;
						margin-top: 10rpx;
						font-size: 34rpx;
						text{
							font-size: 30rpx;
						}
					}
				}
			}
		}
		.msg{
			background-color: #FFFFFF;
			margin-top: 12rpx;
			padding: 0rpx 34rpx;
			.msg_list{
				padding-top: 32rpx;
				padding-bottom: 32rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;
				.m_left{
					width: 150rpx;
					font-size: 26rpx;
					color: #666666;
					font-weight: 500;
				}
				.m_right{
					font-size: 24rpx;
					font-weight: 700;
					color: #333333;
				}
			}
			.title{
				font-size: 30rpx;
				font-weight: 700;
				color: #333333;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
			}
			.code{
				width: 220rpx;
				height: 220rpx;
				margin: 0 auto;
				padding-top: 24rpx;
				padding-bottom: 52rpx;
			}
		}
	}
</style>
